<template>
    <div>
        <!-- 1. 简单获取vuex里state的几种方式 -->
        <!--
            直接通过state获取
        -->
        <p>{{$store.state.num}}</p>
        <p>{{num}}</p>
        <hr>
        <!--
            直接通过getters获取
        -->
        <p>{{$store.getters.dbNum}}</p>
        <p>{{dbNum}}</p>
        <hr>
        <button @click="add">同步增加按钮</button>
        <hr>
        <button @click="add2">异步增加按钮</button>
    </div>
</template>

<script>
export default {
    name:'',
    components: {

    },
    props: {

    },
    data() {
        return {

        };
    },
    computed: {
        num(){
            return this.$store.state.num
        },
        dbNum(){
            return this.$store.getters.dbNum
        }
    },
    methods: {
        add(){
            this.$store.commit('addNum',10)
        },
        add2(){
            this.$store.dispatch('asyncAddNum',20)
        }
    },
};
</script>

<style scoped lang="less">

</style>
